<template>
  <div class="container">
    <el-row class="mb10">
      <el-col :span="16">
        <div class="flex">

            <el-select v-model="data.searchParams.projectYear" placeholder="年份" style="width: 10%" @change-value="changeValue" clearable >
              <el-option :label="item.itemText" :value="item.itemValue"
                         :key="item.itemValue" v-for="item in options.yearList" />
            </el-select>
          <SelectOption
            :options="options.unitnameList"
            :placeholder="'奖项种类'"
            @change-value="changeValue1"
          >
          </SelectOption>
         <div class="conUnitName">
            <el-cascader
                popper-class="gy-cascader"
                :options="data.orgAllList"
                :props="data.popupTreeProps"
                v-model="data.searchParams.applyUnitName"
                :show-all-levels="false"
                placeholder="申报单位"
                clearable>
              <template #default="{ data }">
                <el-tooltip
                    :disabled="data.name.length < 13"
                    class="item"
                    effect="dark"
                    :content="data.name"
                    placement="bottom-start"
                >
                  <span>{{ data.name }}</span>
                </el-tooltip>
              </template>
            </el-cascader>
          </div>


          <el-button class="ordinary" @click="search()">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExport()" v-limit="'KJSL:PTJCJS:KJZYZHPT:EXPERT'"
          >批量导出</el-button
        >
      </el-col>
    </el-row>
    <span style="font-weight: bold;">奖励奖金合计：{{ data.bonussum }}(万元)</span>
    <div>
      <Table
        :loading="data.isLoading"
        :tableArr="data.allTableData"
        :pagination="data.page"
        :columns="data.columns"
        :total="data.page.total"
        @delectTable="delectIds"
        @currentChange="currentChange"
      >
        <template #operate="{ row }">
          <div v-if="!row.remark1">
            <el-button
                size="small"
                class="ordinary"
                @click="handleRemark(row)"
                v-limit="'KJSL:KJJL:KJCGJL:EDIT'"
            >添加备注</el-button>
          </div>
          <div v-else style="color:#007DEE;">
            {{ row.remark1 }}
          </div>
        </template>
      </Table>
    </div>
    <el-dialog
        v-model="data.remarkDialog"
        width="40%"
        :show-close="false"
        :close-on-click-modal="false"
        @closed="close"
        destroy-on-close
    >
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" style="max-width: 600px">
          <el-form-item label="备注：" prop="remark1" >
            <el-input
              v-model="ruleForm.remark1"
              :rows="3"
              type="textarea"
              placeholder="请添加备注"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.remarkDialog=false">取消</el-button>
            <el-button type="primary" @click="saveRemark">保存</el-button>
          </div>
        </template>
    </el-dialog>

  </div>
</template>
<script lang="js">
import * as proxy from "@/constants/proxy"
import request from "@/utils/request"
import Api from '@/views/science/api/awards'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import { Modals, tips } from '@/views/science/components/tips/tips'
import { ElMessage } from 'element-plus'
import { computed, reactive, ref } from 'vue'
import { useStore } from 'vuex'



export default {
  components: {
    SelectOption,
    Table,
  },
  setup() {
    const store = useStore()
    const ruleForm = reactive({
      remark1: '已提供高新权属说明',
    })

    const rules = reactive({
      remark1: [
        { required: true, message: '请输入备注', trigger: 'change', },
      ]
    })

    const ruleFormRef = ref()

    let data = reactive({
      orgAllList: [],
      popupTreeProps: {
        label: 'name',
        children: 'children',
        value:'id',
        checkStrictly: true,
      },
      times: null,
      taskId: '',
      businessKey: '',
      dealVisible: false,
      isLoading: false,
      detail_loading: false,
      constructionName: '',
      processInstanceId: '',
      changeLogs: [],//变更记录
      addFlag: 0,
      flag1: null,
      flag2: null,
      status: 0, //0编辑，1审核
      dialogVisible: false,//弹窗
      remarkDialog:false, //添加备注
      page: { page: 1, limit: 10, total: 0 },
      ids: [],
      time: [],
      searchParams: {
        projectYear: '2024', // 年份
        awardApplyName: '', // 申报奖项
        applyUnitName: '',
      },
      processInstanceIdtwo:'',
      bonus:'',
      allTableData: [],
      columns: [
/*        {
          key: 'projectNo',
          width: 140,
          label: '项目编号',
        },*/
        {
          key: 'projectYear',
          width: 140,
          label: '年份',
        },
        {
          key: 'relateName',
          width: 140,
          // label: '项目名称',
          label: '名称',
        },
        {
          key: 'applyClass',
          width: 140,
          label: '奖项种类',
        },
/*        {
          key: 'awardApplyName',
          width: 140,
          label: '申报奖项',
        },*/
        {
          key: 'applyUnitName',
          width: 140,
          label: '申报单位',
        },
        {
          key: 'grade',
          width: 140,
          label: '等级',
        },
        {
          key: 'bonusStandard',
          width: 140,
          label: '奖金标准',
        },
        {
          key: 'ranking',
          width: 140,
          label: '中咨集团排名',
        },
        {
          key: 'bonus',
          width: 140,
          label: '奖金',
          textColor: true
        },
      ],
      pants: [],
      users: [],
      fileList: [], //附件信息

      awardSelect: {
        sbjx: 1,
        sblx: 1,
        pants: {}, //附表信息-科技创新成果奖-科学奖项
        patents: {}, //附表信息-科技创新成果奖-发明专利
        softwarecopyrights: {}, //科技创新成果奖-软件著作权
        technicalnorms: {}, //科技创新成果奖-技术标准
        technicalmethods: {}, //科技创新成果奖-技术工法
        composition: {}, //科技创新成果奖-学术著作
        thesis: {}, //科技创新成果奖-学术论文
        projects: {}, //重大科技项目立项奖
        innovate: {}, //创新平台建设奖
      },
      zlData: {},
      detailVisible_loading:false,
      detailVisible: false,
      currentRow:{},
      bonussum:'',

    })
    const loading = ref(true)//加载
    // 存储下拉框数组的对象
    const options = reactive({
      projectnameList: computed(() => store.state.technologyStrength.KJSL_DECLARATION_TYPE),
      unitnameList: computed(() => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1),
      yearList: [
        { itemText: '全部年份', itemValue: '' },
        { itemText: '2026年', itemValue: '2026' },
        { itemText: '2025年', itemValue: '2025' },
        { itemText: '2024年', itemValue: '2024' },
        { itemText: '2023年', itemValue: '2023' },
        { itemText: '2022年', itemValue: '2022' },
        { itemText: '2021年', itemValue: '2021' },
        { itemText: '2020年', itemValue: '2020' },
        { itemText: '2019年', itemValue: '2019' },
        { itemText: '2018年', itemValue: '2018' },
      ],//年份
    })
    const changeValue = (item) => data.searchParams.projectYear = item.itemValue
    const changeValue1 = (item) => data.searchParams.awardApplyName = item.itemValue

    data.searchParams.page = data.page.page
    data.searchParams.pageSize = data.page.limit
    const saveRemark = ()=>{
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          Api.updatedateremark1({
            baseInfo:{
              id:data.currentRow.id,
              remark1:ruleForm.remark1
            }
          }).then(res=>{
            console.log(res.data,'res.data');
            if (res.data.code == 200) {
              getListData()
              data.remarkDialog=false
              ElMessage({
                message: "添加成功",
                type: "success",
              });
            }
          })
        }
      })

    }
    //添加备注
    const handleRemark = (row) => {
      data.remarkDialog = true
      data.currentRow = row
    }
    const close = ()=>{
      ruleForm.remark1 ='已提供高新权属说明'
    }
    const getListData = () => { // 获取列表数据
      loading.value = true   // 加载
      data.isLoading = true
      let obj = {...data.searchParams}

      obj.applyUnitName = obj.applyUnitName ? obj.applyUnitName[obj.applyUnitName.length - 1] : ''
      console.log('obj',obj);
      Api.getbonusTotalList(obj)
        .then((res) => { // 获取列表数据
          let resData = res.data.data // 获取列表数据
          resData.records.map((item) => {
            if (item.status == 0) {
              item.status = "待提交"
            } else if (item.status == 1) {
              item.status = "办理中"
            } else if (item.status == 2) {
              item.status = "正常办结"
            } else if (item.status == 3) {
              item.status = "已退回"
            }
            else if (item.status == 4) {
              item.status = "已撤办"
            }
            else if (item.status == 5) {
              item.status = "强制办结"
            }
            else if (item.status == 6) {
              item.status = "已废弃"
            }
            else if (item.status == 7) {
              item.status = "已挂起"
            }
            else if (item.status == 8) {
              item.status = "已驳回"
            }
            item.applyTime = new Date(item.applyTime).getFullYear() + `-` + (new Date(item.applyTime).getMonth() + 1) + `-` + new Date(item.applyTime).getDate()
          })
          data.allTableData = resData.records   // 获取列表数据
          data.bonussum = resData.records[0].bonussum
          data.page.total = resData.total   // 获取列表数据
          data.isLoading = false
        })
        .finally(() => { // 获取列表数据
          loading.value = false  // 获取列表数据
        }).catch((error) => {
          data.isLoading = false
        })
    }

    // 点击查询按键，分页设置为当前页为1，
    const search = () => {
      console.log('搜索',data.searchParams);
      data.page.page = 1
      getListData()
    }

    const delectIds = (ids) => {
      data.ids = ids
    }
    const currentChange = (current) => {
      data.searchParams.page = current
      getListData()
    }
    const getExport = () => {
      let msg = '是否导出全部数据'
      if (data.ids.length > 0) {
        msg = '是否导出所选数据'
      }
      Modals(msg, '提示', 'warning').then(async () => {
        const params = {
          ...data.searchParams,
          ids: data.ids
        }
        await Api.exportSummary(params, "奖金汇总")
      }).catch(() => {
        console.log("点击了取消")
      })
    }
    const getUnit = () => {
      return request({
        url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
        method: "get",
      }).then(res => {
        data.orgAllList = res.data.data
      })
    }
    getListData()
    getUnit()
    return {
      delectIds,
      saveRemark,
      changeValue,
      changeValue1,
      currentChange,
      search,
      options,
      data,
      ruleForm,
      rules,
      ruleFormRef,
      handleRemark,
      getListData,
      getExport,
      close,
    }
  },
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}
.conUnitName{
  display: inline-block;
  margin-bottom: -10px;
  margin-right: 15px;
  padding-bottom: 10px;
  margin-top: -5px;
}
/deep/.el-dialog > .el-dialog__footer {
  position: relative;
  top: -10px;
}

:global(.el-dialog__body) {
  padding: 0;
}

.el-col {
  line-height: 40px;
}
.el-input--small .el-input__inner {
  //height: 42px !important;
  //line-height: 32px;

}
.el-form-item {
  .el-input {
    width: 100px;
    background-color: aliceblue;
  }

  .el-select {
    width: 100px;
  }
}

.custom-color {
  color: red !important;
  /* 确保优先级高于其他样式 */
}

.el-table th {
  background-color: #f0f0f0;
  /* 修改表头背景色 */
  color: #333;
  /* 修改表头文字颜色 */
}

/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */

.open-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/deep/.el-dialog__body {
  display: block !important;
}

.mt15 {
  margin-top: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

.tc {
  text-align: center;
}

.align-center {
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.mt20 {
  margin-top: 20px;
}

.flex {
  display: flex;
  //height: 42px ;
}
</style>
